<script setup>
import {
    defineExpose,
    defineProps,
    onMounted,
    reactive,
    ref,
    watchEffect,
} from 'vue'
import { queryHouseInfoList } from '@fl/api/anjutong/seckill-manage'

const props = defineProps({
    treefirid: {
        type: Array,
    },
})
const tableData = ref([])
const lieData = ref([])
const quanblclist = ref([])
const allCheckHouse = ref([])
const isIndeterminate = ref(false)
const quanblx = ref()

// 行全选按钮
const hangqx = reactive({})
const louceng = ref([])
const loading = ref(false)
const lcbanxuan = reactive({})
// 获取全部房间号
const fanghao = {}
const dgqx = reactive({})
// 定义数据名字对象，键名与后端返回的是列数对应，键值与全选按钮进行绑定，分别控制不同数列内容
const nameobj = reactive({})
const banxuan = reactive({})
const num = ref(0)
function checkAll(val) {
    if (val) {
        isIndeterminate.value = false
        quanblx.value = true
        // console.log(lieData.value, "列的数据内");
        // 判断列的状态数据内容
        lieData.value.forEach((item, index) => {
            // nameobj[item.fh] = true;
            // banxuan[item.fh] = false;
            // 当全部选中的值里面包含这一列的所有值的时候，就是全选，包含一个就是半选，一个都没包含就是不选
            if (item.fhList.every((v, k) => quanblclist.value.includes(v))) {
                nameobj[item.fh] = true
                banxuan[item.fh] = false
            }
            else if (item.fhList.every((v, k) => !quanblclist.value.includes(v))) {
                nameobj[item.fh] = false
                banxuan[item.fh] = false
            }
            else {
                nameobj[item.fh] = false
                banxuan[item.fh] = true
            }
        })
    }
    else {
        isIndeterminate.value = false
        quanblx.value = false
        lieData.value.forEach((item, index) => {
            nameobj[item.fh] = false
            banxuan[item.fh] = false
        })
    }
    console.log(quanblclist.value)
    if (quanblclist.value.length == 0) {
        quanblx.value = false
    }
}
function check() {
    quanblclist.value = [...new Set(quanblclist.value)]
    if (quanblclist.value.length == 0) {
        isIndeterminate.value = false
        quanblx.value = false
        lieData.value.forEach((item, index) => {
            nameobj[item.fh] = false
            banxuan[item.fh] = false
        })

        for (let i = 0; i < tableData.value.length; i++) {
            hangqx[tableData.value[i].ceng] = false
            lcbanxuan[tableData.value[i].ceng] = false
        }
        return
    }
    else {
        let count = 0

        for (let t = 0; t < tableData.value.length; t++) {
            // console.log(fanghao[tableData.value[t].ceng]);
            count = count + fanghao[tableData.value[t].ceng].length
        }
        // console.log(count);

        if (quanblclist.value.length == count + tableData.value.length) {
            // console.log(123);
            isIndeterminate.value = false
            quanblx.value = true
        }
        else {
            isIndeterminate.value = true
            quanblx.value = false
        }
    }

    let lcqx = true
    const mczt = true
    for (let i = 0; i < tableData.value.length; i++) {
        const item = tableData.value[i]
        // console.log(tableData.value);
        if (
            item.houseData.every(element => quanblclist.value.includes(element.id))
        ) {
            // mczt = true;
            // console.log("楼层全选");
            if (!quanblclist.value.includes(item.ceng)) {
                quanblclist.value.push(item.ceng)
            }
            hangqx[item.ceng] = true
            // console.log("item.ceng", hangqx);
            lcbanxuan[item.ceng] = false
            for (let j = 0; j < fanghao[item.ceng].length; j++) {
                dgqx[fanghao[item.ceng][j]] = true
            }
        }
        else if (
            item.houseData.every(element => !quanblclist.value.includes(element.id))
        ) {
            hangqx[item.ceng] = false
            lcbanxuan[item.ceng] = false
            lcqx = false
            if (quanblclist.value.includes(item.ceng)) {
                quanblclist.value.splice(quanblclist.value.indexOf(item.ceng), 1)
            }
            for (let j = 0; j < fanghao[item.ceng].length; j++) {
                /* if (newValue.indexOf(fanghao[item.ceng][j]) == -1) { */
                dgqx[fanghao[item.ceng][j]] = false
                /* } */
            }
        }
        else {
            // mczt = false;
            // console.log("楼层半选");
            if (quanblclist.value.includes(item.ceng)) {
                quanblclist.value.splice(quanblclist.value.indexOf(item.ceng), 1)
            }
            // console.log(555);
            hangqx[item.ceng] = false
            lcbanxuan[item.ceng] = true
            for (let j = 0; j < fanghao[item.ceng].length; j++) {
                if (quanblclist.value.includes(fanghao[item.ceng][j])) {
                    dgqx[fanghao[item.ceng][j]] = false
                }
                else {
                    // console.log("没有");
                    dgqx[fanghao[item.ceng][j]] = false
                }
            }
        }
    }

    for (let m = 0; m < lieData.value.length; m++) {
        const fhlist = lieData.value[m].fhList
        // console.log(lieData.value);
        // console.log(fhlist);
        // 包含本列所有值
        if (fhlist.every(element => quanblclist.value.includes(element))) {
            // console.log("包含本列所有值");
            nameobj[lieData.value[m].fh] = true
            banxuan[lieData.value[m].fh] = false
            // 不包含本列所有值
        }
        else if (
            fhlist.every(element => !quanblclist.value.includes(element))
        ) {
            // console.log("不包含本列所有值");
            nameobj[lieData.value[m].fh] = false
            banxuan[lieData.value[m].fh] = false
            // 半选
        }
        else {
            // console.log("半选");
            nameobj[lieData.value[m].fh] = false
            banxuan[lieData.value[m].fh] = true
        }
    }
    console.log(quanblclist.value)
    if (quanblclist.value.length == 0) {
        isIndeterminate.value = false
        quanblx.value = false
    }
}
onMounted(() => {
    //   console.log("渲染table数据", props.treefirid);
    if (props.treefirid != 0) {
        loading.value = true
        // 获取到id数组，拿到渲染的table值
        tableData.value = []
        lieData.value = []
        const obj = {
            ids: [...props.treefirid],
        }
        // // 房源接口请求
        queryHouseInfoList(obj)
            .then((res) => {
                loading.value = false
                //   console.log(res.data[0], "房源接口请求");
                console.log(res.data[0].cengData)
                tableData.value = res.data[0].cengData
                lieData.value = res.data[0].liedata
                tableData.value.forEach((item) => {
                    louceng.value.push(item.ceng)
                    const arr = []
                    item.houseData.forEach((v, k) => {
                        // 定义数组获取对应层数全部数据内容
                        arr.push(v.id)
                        fanghao[item.ceng] = JSON.parse(JSON.stringify(arr))

                        // 如果id不存在则表明此值不可选
                        if (v.id == null) {
                            dgqx.bukexuan = false
                        }
                        else {
                            // dgqx[v.id] = false;
                            // 根据状态回显
                            if (v.sjState == 0) {
                                dgqx.statebukx = false
                            }
                            else {
                                dgqx[v.id] = false
                            }
                        }
                    })
                    lcbanxuan[item.ceng] = false
                    hangqx[item.ceng] = false
                })

                lieData.value.forEach((item, index) => {
                    nameobj[item.fh] = false
                    banxuan[item.fh] = false
                })
                // handleCheckAllChange(true);
                // console.log(fanghao, "所有房号内容");
            })
            .catch((res) => {
                loading.value = false
            })
    }
})

// 选中列函数
function handlelie(obj) {
    console.log(obj)
    const fhList = obj.fhList
    if (fhList.every(item => quanblclist.value.includes(item))) {
    // 当前选中列的值全部都包含在选中列表值中
        for (var i = 0; i < fhList.length; i++) {
            if (quanblclist.value.includes(fhList[i])) {
                quanblclist.value.splice(quanblclist.value.indexOf(fhList[i]), 1)
            }
        }
    }
    else if (fhList.every(item => !quanblclist.value.includes(item))) {
        tableData.value.forEach((item, indecx) => {
            item.houseData.forEach((v, k) => {
                if (v.fyState == '3' || v.fyState == '1' || v.fyState == '01' || (v.managerSjState == '1' && v.fyState != '1' && v.fyState != '2')) {
                    fhList.forEach((fhitem) => {
                        if (fhitem == v.id) {
                            quanblclist.value.push(v.id)
                            allCheckHouse.value.push(v)
                            if (!quanblclist.value.includes(item.ceng)) {
                                quanblclist.value.push(item.ceng)
                            }
                        }
                    })
                }
            })
        })
    }
    else {
        for (var i = 0; i < fhList.length; i++) {
            if (quanblclist.value.includes(fhList[i])) {
                quanblclist.value.splice(quanblclist.value.indexOf(fhList[i]), 1)
            }
        }
    }

    check()
}
// 单击房屋事件
function dgclick(v) {
    console.log('目前里面的值', quanblclist.value)
    if (quanblclist.value.includes(v.id)) {
        const allCheckIndex = allCheckHouse.value.findIndex(item => item.id === v.id)
        allCheckIndex > -1 && allCheckHouse.value.splice(allCheckIndex, 1)
        for (var m = 0; m < tableData.value.length; m++) {
            if (fanghao[tableData.value[m].ceng].includes(v.id)) {
                // 在判断这层还有没有其他值在list里
                const c = quanblclist.value.filter((v) => {
                    return fanghao[tableData.value[m].ceng].includes(v)
                })
                // console.log("交集", c);
                // 交集等于1，则移除本元素，并且移除房号
                if (c.length == 1) {
                    if (quanblclist.value.includes(tableData.value[m].ceng)) {
                        quanblclist.value.splice(
                            quanblclist.value.indexOf(tableData.value[m].ceng),
                            1,
                        )
                    }
                }

                quanblclist.value.splice(quanblclist.value.indexOf(v.id), 1)
                // 移除元素
                // console.log("移除后的值", quanblclist.value);
            }
        }
    }
    else {
    // 加上该元素，再判断有没有房号，没有房号也加上
        quanblclist.value.push(v.id)
        allCheckHouse.value.push(v)
        for (var m = 0; m < tableData.value.length; m++) {
            // console.log(tableData.value[m]);
            if (fanghao[tableData.value[m].ceng].includes(v.id)) {
                if (!quanblclist.value.includes(tableData.value[m].ceng)) {
                    quanblclist.value.push(tableData.value[m].ceng)
                }
            }
        }
    }

    check()
}

// 单击左侧列表事件
function handleCheckedCitiesChange(value) {
    // console.log(value);
    const fh = fanghao[value]
    console.log(fh)
    const arr = []
    const one = []
    if (
        quanblclist.value.includes(value)
        && fh.every(item => quanblclist.value.includes(item))
    ) {
        if (quanblclist.value.includes(value)) {
            quanblclist.value.splice(quanblclist.value.indexOf(value), 1)
        }
        for (var i = 0; i < fh.length; i++) {
            quanblclist.value.splice(quanblclist.value.indexOf(fh[i]), 1)
        }
    // 完全不包含的情况，就全部加进来
    }
    else if (!quanblclist.value.includes(value)) {
        tableData.value.forEach((item, indecx) => {
            item.houseData.forEach((v, k) => {
                if (v.fyState == '3' || v.fyState == '1' || v.fyState == '01' || (v.managerSjState == '1' && v.fyState != '1' && v.fyState != '2')) {
                    fh.forEach((fhitem) => {
                        if (fhitem == v.id) {
                            quanblclist.value.push(v.id)
                            allCheckHouse.value.push(v)
                        }
                    })
                }
            })
        })
        if (
            !quanblclist.value.includes(value)
            && fh.some(item => quanblclist.value.includes(item))
        ) {
            quanblclist.value.push(value)
        }
    }
    else {
    // 如果有，但是又没有包含全部，则删掉
        if (quanblclist.value.includes(value)) {
            quanblclist.value.splice(quanblclist.value.indexOf(value), 1)
        }
        for (var i = 0; i < fh.length; i++) {
            if (quanblclist.value.includes(fh[i])) {
                quanblclist.value.splice(quanblclist.value.indexOf(fh[i]), 1)
            }
        }
    }
    check()
}
function handleCheckAllChange(val) {
    if (val) {
        const xuanzhongfh = []
        const checkHouseList = []
        const lc = []
        tableData.value.forEach((item, indecx) => {
            item.houseData.forEach((v, k) => {
                if (v.fyState == '3' || v.fyState == '1' || v.fyState == '01' || (v.managerSjState == '1' && v.fyState != '1' && v.fyState != '2')) {
                    console.log(v, '全部选中内容')
                    xuanzhongfh.push(v.id)
                    checkHouseList.push(v)
                    if (!lc.includes(item.ceng)) {
                        lc.push(item.ceng)
                    }
                    // 判断当lc数组的长度是lie数组长度相等，就是全选，否则就是半选
                    if (fanghao[item.ceng].every(item => xuanzhongfh.includes(item))) {
                        hangqx[item.ceng] = true
                        lcbanxuan[item.ceng] = false
                    }
                    else if (
                        fanghao[item.ceng].some(item => xuanzhongfh.includes(item))
                    ) {
                        lcbanxuan[item.ceng] = true
                        hangqx[item.ceng] = false
                    }
                    else {
                        hangqx[item.ceng] = false
                        lcbanxuan[item.ceng] = false
                    }
                }
            })
        })
        console.log(lc)
        quanblclist.value = [...lc, ...xuanzhongfh]
        allCheckHouse.value = [...checkHouseList]
    }
    else {
        quanblclist.value = []
        for (let i = 0; i < tableData.value.length; i++) {
            hangqx[tableData.value[i].ceng] = false
            lcbanxuan[tableData.value[i].ceng] = false
        }
    }
    checkAll(val)
}

defineExpose({
    quanblclist,
    allCheckHouse,
    louceng,
    tableData,
})
</script>

<template>
    <el-table v-loading="loading"
              :data="tableData"
              height="calc(54vh)"
              border
              class="table"
    >
        <el-table-column prop="ceng"
                         width="80"
        >
            <template #header>
                <el-checkbox v-model="quanblx"
                             style="padding-left: 6px"
                             :indeterminate="isIndeterminate"
                             @change="handleCheckAllChange"
                >
                    楼层
                </el-checkbox>
            </template>

            <template #default="{ row }">
                <el-checkbox-group v-model="quanblclist"
                                   type="selection"
                >
                    <el-checkbox :key="row.ceng"
                                 v-model="hangqx[row.ceng]"
                                 style="padding-left: 6px"
                                 :indeterminate="lcbanxuan[row.ceng]"
                                 :label="row.ceng"
                                 @click.prevent.native="handleCheckedCitiesChange(row.ceng)"
                    >
                        {{ row.ceng }}
                    </el-checkbox>
                </el-checkbox-group>
            </template>
        </el-table-column>

        <el-table-column v-for="(i, k) in lieData"
                         width="180px"
        >
            <template #header>
                <el-checkbox v-model="nameobj[i.fh]"
                             style="padding-left: 6px"
                             :indeterminate="banxuan[i.fh]"
                             @change="handlelie(i)"
                >
                    选中本列
                </el-checkbox>
            </template>

            <template #default="{ row }">
                <el-checkbox-group v-model="quanblclist"
                                   type="selection"
                >
                    <div v-if="row.houseData[k].fyState == '0'"
                         class="checkclass"
                    >
                        <el-checkbox v-model="dgqx.bukexuan"
                                     class="wysxkz"
                                     style="background: #b0d2ef"
                                     :label="row.houseData[k].id"
                                     :disabled="true"
                        >
                            <span style="color: #006dcc">{{ row.houseData[k].fh }}</span>
                        </el-checkbox>
                    </div>

                    <div v-else-if="row.houseData[k].fyState == '1' || row.houseData[k].fyState == '01'"
                         class="checkclass"
                    >
                        <!-- <el-tooltip
              class="box-item"
              effect="dark"
              content="请到房源信息管理完善房源"
              placement="top-start"
            >

            </el-tooltip> -->
                        <el-checkbox v-if="row.houseData[k].fh"
                                     :key="row.houseData[k].id"
                                     v-model="dgqx[row.houseData[k].id]"
                                     class="daishou"
                                     style="background: #F2FEF0"
                                     :label="row.houseData[k].id"
                                     @click.prevent.stop="dgclick(row.houseData[k])"
                        >
                            <div style="color: #3cb346;margin-top:4px;line-height:16px;font-size:13px">
                                <span style="color: #3cb346;"
                                      class="font17"
                                >{{ row.houseData[k].fh }}</span>

                                <br>

                                建筑面积:{{ row.houseData[k].jzmj }}m²<br>

                                单价: {{ row.houseData[k].xsdj }}元<br>
                                总价:{{ row.houseData[k].xszj }}元
                            </div>
                        </el-checkbox>
                    </div>

                    <div v-else-if="row.houseData[k].fyState == '2'"
                         class="checkclass"
                    >
                        <el-checkbox v-model="dgqx.bukexuan"
                                     class="yishou"
                                     style="background: #f4d648; width: 100%"
                                     :label="row.houseData[k].id"
                                     :disabled="true"
                        >
                            <span style="color: #000000">{{ row.houseData[k].fh }}</span>
                        </el-checkbox>
                    </div>

                    <div v-else-if="row.houseData[k].fyState == '3'"
                         class="checkclass"
                    >
                        <el-tooltip placement="right"
                                    style="display: none;"
                        >
                            <template #content>
                                建筑面积:{{ row.houseData[k].jzmj }}m²<br>

                                单价: {{ row.houseData[k].xsdj }}元<br>
                                总价:{{ row.houseData[k].xszj }}元
                            </template>
                        </el-tooltip>

                        <el-checkbox v-if="row.houseData[k].fh"
                                     :key="row.houseData[k].id"
                                     v-model="dgqx[row.houseData[k].id]"
                                     class="daishou"
                                     style="background: #F2FEF0"
                                     :label="row.houseData[k].id"
                                     @click.prevent.stop="dgclick(row.houseData[k])"
                        >
                            <div style="color: #3cb346;margin-top:4px;line-height:16px;font-size:13px">
                                <span style="color: #3cb346;"
                                      class="font17"
                                >{{ row.houseData[k].fh }}</span>

                                <br>

                                建筑面积:{{ row.houseData[k].jzmj }}m²<br>

                                单价: {{ row.houseData[k].xsdj }}元<br>
                                总价:{{ row.houseData[k].xszj }}元
                            </div>
                        </el-checkbox>
                    </div>

                    <div v-else-if="row.houseData[k].managerSjState == '1'"
                         class="checkclass"
                    >
                        <el-checkbox v-model="dgqx.bukexuan"
                                     class="ycf"
                                     style="background: #F2FEF0"
                                     :label="row.houseData[k].id"
                        >
                            <div style="color: #3cb346;margin-top:4px;line-height:16px;font-size:13px">
                                <span style="color: #3cb346;"
                                      class="font17"
                                >{{ row.houseData[k].fh }}</span>

                                <br>

                                建筑面积:{{ row.houseData[k].jzmj }}m²<br>

                                单价: {{ row.houseData[k].xsdj }}元<br>
                                总价:{{ row.houseData[k].xszj }}元
                            </div>
                        </el-checkbox>
                    </div>

                    <div v-else-if="row.houseData[k].fyState == '4'"
                         class="checkclass"
                    >
                        <el-checkbox v-model="dgqx.bukexuan"
                                     class="ycf"
                                     style="background: #bdbdc2"
                                     :label="row.houseData[k].id"
                                     :disabled="true"
                        >
                            <span style="color: #333333"
                                  class="font17"
                            >{{ row.houseData[k].fh }}</span>
                        </el-checkbox>
                    </div>

                    <div v-else-if="row.houseData[k].fyState == '5'"
                         class="checkclass"
                    >
                        <el-checkbox v-model="dgqx.bukexuan"
                                     class="yireng"
                                     style="background: #f5c691"
                                     :label="row.houseData[k].id"
                                     :disabled="true"
                        >
                            <span style="color: #e9810c"
                                  class="font17"
                            >{{ row.houseData[k].fh }}</span>
                        </el-checkbox>
                    </div>

                    <div v-else
                         class="checkclass"
                    >
                        <el-checkbox v-if="row.houseData[k].fh"
                                     :key="row.houseData[k].id"
                                     v-model="dgqx[row.houseData[k].id]"
                                     class="kexuan"
                                     :label="row.houseData[k].id"
                        >
                            <span class="font17">{{ row.houseData[k].fh }}</span>
                        </el-checkbox>
                    </div>
                </el-checkbox-group>
            </template>
        </el-table-column>
    </el-table>
</template>

<style lang="scss" scoped>
.table {
    width: calc(90vw - 200px);
}
.el-table__row--cell-green {
    background-color: #67c23a !important;
}
.cell-red {
    background-color: #f56c6c !important;
}
// .el-table__cell {
//   padding: 0px !important;
// }
:deep(.el-table__cell) {
    padding: 0px !important;
    // height: 40px;
}
:deep(.el-table__cell .cell) {
    padding: 0px !important;
}
:deep(.el-table__row > .el-table__cell:nth-child(1)) {
    background-color: var(--el-fill-color-light) !important;
}
.cell {
    padding: 0px !important;
}
.wysxkz,
.daishou,
.ycf,
.yishou,
.yireng,
.kexuan,
.fyxxwws {
    // 无预售许可证
    height: 100%;
    padding-left: 6px;
    width: 100%;
}

.checkclass {
    height: 90px;
}

.font17 {
    font-size: 15px;
}
</style>
